<template>
  <div>

    <el-form ref="queryParams"
             label-width="100px"
             :model="queryParams">

      <el-row :gutter="15">

        <el-col :span="10">
          <el-form-item label="车牌号" prop="carNo">
            <div>陕A12121</div>
          </el-form-item>
        </el-col>

        <el-col :span="14">
          <el-form-item label="维保类型" prop="type">
            <div>保养</div>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row :gutter="15">

        <el-col :span="10">
          <el-form-item label="送车时间" prop="carNo">
            <div>2022-01-02</div>
          </el-form-item>
        </el-col>

        <el-col :span="14">
          <el-form-item label="维修厂" prop="type">
            <div>骑车维修厂</div>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row :gutter="15">

        <el-col :span="10">
          <el-form-item label="关联订单" prop="carNo">
            <div>2022-01-02</div>
          </el-form-item>
        </el-col>

        <el-col :span="14">
          <el-form-item label="维保项目" prop="type">
            <div>---</div>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row :gutter="15">

        <el-col :span="10">
          <el-form-item label="费用合计" prop="carNo">
            <el-input style="width: 200px" v-model="queryParams.fee">

            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="14">
          <el-form-item label="付款方" prop="carNo">
            <el-select v-model="queryParams.payfrom">
              <el-option value="1">
                111
              </el-option>
              <el-option value="2">
                222
              </el-option>
            </el-select>

            <div style="font-size: 10px;color: #999">注：公司付款则维保完成后数据同步至车辆账单，其他付款方付款将不同步</div>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row :gutter="15">

        <el-col :span="10">
          <el-form-item label="取车时间" prop="carNo">
            <div>2022-12-12</div>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row :gutter="15">

        <el-col :span="10">

          <el-form-item label="维保附件"
                        prop="upcoverImage">

            <MmvUploadImage @upImg="uppeerImage" ref="prizeUrl" size="6">
              <el-button size="small" type="primary" icon="el-icon-upload">添加图片</el-button>
              <div slot="tip" class="el-upload__tip">
                支持JPG/JPEG/PNG，尺寸375px*256px，不超过5M
              </div>
            </MmvUploadImage>

          </el-form-item>

        </el-col>

      </el-row>

      <el-row :gutter="15">

        <el-col :span="16">
          <el-form-item label="备注" prop="carNo">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入备注"
              v-model="queryParams.remark">
            </el-input>
          </el-form-item>
        </el-col>

      </el-row>



    </el-form>

    <div class="bottom-layout">

      <el-button size="mini" @click="cancelQuery">取消</el-button>
      <el-button type="primary" size="mini" @click="confirm">确认</el-button>
    </div>
  </div>
</template>

<script>
import MmvUploadImage from '@/views/plan/components/mmv-upload-image'

export default {
  components: {
    MmvUploadImage,
  },
  data() {
    return {
      queryParams: {
        prizeUrl:[]
      }
    }
  },
  props: {
    selId: ''
  },
  methods: {
    cancelQuery() {
      this.$emit('cancel')
    },
    confirm() {
      this.$emit('submitEditMaintain')
    },
    // 添加实物图片
    uppeerImage(url) {
      // 分享封面上传成功地址
      this.formData.prizeUrl = url
    },
  }
}
</script>

<style lang="scss" scoped>
.bottom-layout {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 40px 0 0;
}
</style>
